Vue Component Props

prop 是父傳子的單向下行綁定(one-way-down binding)
父組件通過 props 把資料傳給子組件，子組件則需要聲明 props 接收。

基礎範例

<div id="app">
    <!-- 2、3 -->
    <child message="hello!"></child>
</div>
 
<script>
Vue.component('child', {
  props: ['message'], // 4
  template: '<span>{{ message }}</span>' // 5
})

new Vue({
  el: '#app' // 1
})
</script>

綁定 ‘#app’
發現子組件 child
解析子組件
從定義的接收器接收 ‘hello!’
渲染 <span>hello!</span> 到頁面上

類型/型別

以物件的型態定義 props，格式為 props: {'prop名稱': prop型別}

// 普通的字串與陣列的 prop
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

// 以物件定義的 prop
props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

靜態與動態的 prop 值

字串

給子組件 blog-post 傳入一個靜態的值。
子組件會聲明 props: [title] 來接收字串 My journey with Vue。

1	<blog-post title="My journey with Vue"></blog-post>

想要動態賦值則需使用 v-bind 指令。
同樣是聲明 props: [title]，但 post.title 為父組件 data 內的變數，也就是說這裡 props 接收的是父層的變數。

<!-- 動態賦予一個變數的值 -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- 動態賦予一個複雜表達式的值 -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>

數字

<!-- 即便 '42' 是靜態的，仍須使用 v-bind 來告訴 Vue 這是一個 JavaScript 表達式而不是字串 -->
<blog-post v-bind:likes="42"></blog-post>

<!-- 用一個變數進行動態賦值 -->
<blog-post v-bind:likes="post.likes"></blog-post>

布林

<!-- prop 没有值的情况也是 true -->
<blog-post is-published></blog-post>

<!-- 即便 'false' 是靜態的，仍須使用 v-bind 來告訴 Vue 這是一個 JavaScript 表達式而不是字串 -->
<blog-post v-bind:is-published="false"></blog-post>

<!-- 用一個變數進行動態賦值 -->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

陣列

<!-- 即便陣列是靜態的，仍須使用 v-bind 來告訴 Vue 這是一個 JavaScript 表達式而不是字串 -->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<!-- 用一個變數進行動態賦值 -->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

物件

<!-- 即便物件是靜態的，仍須使用 v-bind 來告訴 Vue 這是一個 JavaScript 表達式而不是字串 -->
<blog-post
  v-bind:author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
></blog-post>

<!-- 用一個變數進行動態賦值 -->
<blog-post v-bind:author="post.author"></blog-post>

物件中的所有屬性

範例物件

post: {
  id: 1,
  title: 'My Journey with Vue'
}

如果想要使用 props 傳遞一個物件內的所有屬性，可以使用不帶參數的 v-bind。

1 2	<!-- 只有 v-bind --> <blog-post v-bind="post"></blog-post>

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

$emit

同場加映子傳父的 emit

<div id="emit-example-simple">
  <!-- 2、5 -->
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>

Vue.component('welcome-button', {
  template: `
    <button v-on:click="$emit('welcome')"> // 3、4
      Click me to be welcomed
    </button>
  `
})
new Vue({
  el: '#emit-example-simple',  // 1
  methods: {
    sayHi: function () {  // 6
      alert('Hi!')
    }
  }
})

綁定 ‘#app’
找到子組件
執行子組件(@click)
@click後觸發事件
父組件綁定了事件
執行事件

# Vue, w3HexSchool